<template>
	<Top-Page>
		<cu-custom bgColor="bg-gradual-white-3" :isBack="true">
			<template #backText></template>
			<template #content>{{ title }}</template>
		</cu-custom>
		<!-- <view class="cu-bar bg-white search fixed" :style="[{ top: CustomBar + 'px' }]"> -->
		<!-- :style="[{ top: CustomBar + 'px' }]" -->
		<view class="fixed bg-white nav-box">
			<!-- <view class="condition-selector" @click="show = !show">筛选</view> -->

			<!-- 常规搜索框 -->
			<view class="search-box">
				<view class="search-form round" v-if="!current">
					<text class="cuIcon-search"></text>
					<input
						type="text"
						v-model="keywords"
						placeholder="请输入用户账号进行搜索"
						confirm-type="search"
					/>
				</view>

				<view :class="['action']">
					<button
						:class="[
              'cu-btn',
              'round',
              'bg-white',
              'border-pink',
              { 'novice-guide-operate': !noviceGuide.includes(11) }
            ]"
						@tap="search()"
					>
						搜索
					</button>
				</view>
			</view>

			<UserFiltrate
				@transmit="transmit"
				@changeShow="changeShow"
				:class="
          ([{ 'novice-guide-operate': !noviceGuide.includes(12) && noviceGuide.includes(11) }], 'User-Filtrate-box')
        "
			/>
		</view>

		<view>
			<view>
				<view class="cu-list menu no-padding" v-if="contacts.length">
					<view
						class="cu-item"
						v-for="(items, sub) in contacts"
						:key="sub"
						@tap="openDetails(items)"
					>
						<view
							class="cu-avatar radius mr-15"
							:style="[{ backgroundImage: 'url(' + items.avatar + '?imageView2/1/w/100/h/100/q/50' + ')' }]"
						></view>
						<view class="content">
							<view class="c-333">{{ items.realname }}</view>
						</view>
						<view class="action ml-10">
							<view
								class="text-blue"
								v-if="items.friend"
								@tap.stop="sendMsg(items.user_id)"
								>发消息</view
							>
							<view class="text-blue" v-if="!items.friend">查看</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="!contacts.length">
				<Empty :noDatatext="noText" textcolor="#999"></Empty>
			</view>
		</view>

		<view class="novice-guide-location-box">
			<template v-if="!noviceGuide.includes(11)">
				<view class="novice-guide-title">搜索好友</view>
			</template>
			<template v-else-if="!noviceGuide.includes(12)">
				<view class="novice-guide-title">按条件筛选好友</view>
			</template>
		</view>

		<view
			class="novice-guide-box"
			v-if="!noviceGuide.includes(11) || !noviceGuide.includes(12)"
		></view>
	</Top-Page>
</template>

<script>
	import UserFiltrate from "@/components/User-Filtrate/User-Filtrate.vue";
	import { useMsgStore } from "@/store/message";
	import pinia from "@/store/index";
	const msgStore = useMsgStore(pinia);
	/**
	 * 初始的引导页
	 */
	export default {
		name: "search",
		components: {
			UserFiltrate,
		},
		data() {
			return {
				noviceGuide: uni.getStorageSync("noviceGuide") || [],
				title: "搜索朋友",
				keywords: "",
				contacts: [],
				type: 1,
				noText: "暂无数据",
				good_at: "", //技能事项
				hobby: "", //爱好
			};
		},
		methods: {
			search() {
				if (!this.noviceGuide.includes(11)) {
					this.noviceGuide.push(11);
					uni.setStorageSync("noviceGuide", this.noviceGuide);
				}

				if (!this.hobby && !this.good_at && this.keywords == "") {
					return uni.showToast({
						title: "请输入用户账号进行搜索",
						icon: "none",
					});
				}
				this.noText = "未搜索到数据";

				const data = {
					keywords: this.keywords,
					hobby: this.hobby,
					good_at: this.good_at,
				};

				this.$api.msgApi.searchUser(data).then((res) => {
					if (res.code == 0) {
						const data = res.data;
						this.contacts = data;

						const ids = msgStore.contacts?.map((item) => item.id);

						data.forEach((item) => {
							const index = ids.indexOf(item.user_id);

							if (
								item.friend &&
								index != -1 &&
								msgStore.contacts[index].is_hide
							) {
								msgStore.updateContacts({
									change_hide: true,
									id: item.user_id,
									is_hide: 0,
								});
							}
						});
					}
				});
			},
			// 打开用户详情
			openDetails(items) {
				uni.navigateTo({
					url: "/pages/contacts/detail?id=" + items.user_id,
				});
			},
			sendMsg(id) {
				uni.navigateTo({
					url: "/pages/message/chat?id=" + id,
				});
			},
			changeShow() {
				if (!this.noviceGuide.includes(12)) {
					this.noviceGuide.push(12);
					uni.setStorageSync("noviceGuide", this.noviceGuide);
				}
			},
			transmit(data) {
				this.hobby = data.hobby;
				this.good_at = data.good_at;

				this.search();
			},
		},
	};
</script>

<style scoped>
	.nav-box {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		padding: 10upx 30upx 10upx 0;
	}
	.novice-guide-location-box {
		padding-right: 60rpx;
		bottom: auto;
		top: 200rpx;
		text-align: right;
	}
	.search-box {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		flex: 1;
	}
	.fixed {
		z-index: 10;
	}
	.search-form-box {
		height: 100upx;
		display: flex;
		align-items: center;
		flex: 1;
		padding: 0 10upx;
	}

	.uni-input-placeholder {
		font-size: calc(var(--amplified_base) * 24upx);
	}
	>>> .uni-input-input {
		font-size: calc(var(--amplified_base) * 24upx) !important;
	}

	.search-form {
		background-color: #f5f5f5;
		line-height: calc(var(--amplified_base) * 72rpx);
		height: calc(var(--amplified_base) * 72rpx);
		color: #333333;
		flex: 1;
		display: flex;
		align-items: center;
		margin: 0 30upx;
		padding: 0 20upx;
		font-size: calc(var(--amplified_base) * 24upx);
	}
	.cuIcon-search {
		margin-right: 10upx;
	}

	.border-pink {
		border: 1px solid #1a66ff;
		color: #1a66ff;
	}
	.User-Filtrate-box {
		flex-shrink: 0;
	}
</style>
